import React, { useRef } from 'react';

interface ToolbarProps {
  onRefresh: () => void;
  onCreateFolder: (folderName: string) => void;
  onUploadSingle: (file: File) => void;
  onUploadMultiple: (files: File[]) => void;
  onDeleteSelected: () => void;
  onGoToRoot: () => void;
  hasSelectedItems: boolean;
  disabled?: boolean;
}

const Toolbar: React.FC<ToolbarProps> = ({
  onRefresh,
  onCreateFolder,
  onUploadSingle,
  onUploadMultiple,
  onDeleteSelected,
  onGoToRoot,
  hasSelectedItems,
  disabled = false
}) => {
  const singleFileInputRef = useRef<HTMLInputElement>(null);
  const multipleFileInputRef = useRef<HTMLInputElement>(null);

  const handleCreateFolder = () => {
    if (disabled) return;
    const folderName = prompt('请输入文件夹名称:');
    if (folderName?.trim()) {
      onCreateFolder(folderName.trim());
    }
  };

  const handleSingleFileSelect = () => {
    if (disabled) return;
    singleFileInputRef.current?.click();
  };

  const handleMultipleFileSelect = () => {
    if (disabled) return;
    multipleFileInputRef.current?.click();
  };

  const handleSingleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (disabled) return;
    const file = e.target.files?.[0];
    if (file) {
      onUploadSingle(file);
      // 清空文件输入框
      e.target.value = '';
    }
  };

  const handleMultipleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (disabled) return;
    const files = e.target.files;
    if (files && files.length > 0) {
      onUploadMultiple(Array.from(files));
      // 清空文件输入框
      e.target.value = '';
    }
  };

  const handleDelete = () => {
    if (disabled) return;
    if (window.confirm(`确定要删除选中的项目吗？`)) {
      onDeleteSelected();
    }
  };

  const handleRefresh = () => {
    if (disabled) return;
    onRefresh();
  };

  const handleGoToRoot = () => {
    if (disabled) return;
    onGoToRoot();
  };

  return (
    <div className="mb-5">
      <div className="flex flex-wrap gap-2 items-center">
        <button
          onClick={handleRefresh}
          disabled={disabled}
          className="flex items-center px-3 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-all text-sm disabled:opacity-50 disabled:cursor-not-allowed"
        >
          🔄 刷新
        </button>
        
        <button
          onClick={handleCreateFolder}
          disabled={disabled}
          className="flex items-center px-3 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all text-sm disabled:opacity-50 disabled:cursor-not-allowed"
        >
          📁 新建文件夹
        </button>
        
        <button
          onClick={handleSingleFileSelect}
          disabled={disabled}
          className="flex items-center px-3 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all text-sm disabled:opacity-50 disabled:cursor-not-allowed"
        >
          📤 单个上传
        </button>
        
        <button
          onClick={handleMultipleFileSelect}
          disabled={disabled}
          className="flex items-center px-3 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all text-sm disabled:opacity-50 disabled:cursor-not-allowed"
        >
          📤 批量上传
        </button>
        
        <button
          onClick={handleDelete}
          disabled={!hasSelectedItems || disabled}
          className="flex items-center px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all text-sm disabled:opacity-50 disabled:cursor-not-allowed"
        >
          🗑️ 删除选中
        </button>
        
        <button
          onClick={handleGoToRoot}
          disabled={disabled}
          className="flex items-center px-3 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-all text-sm disabled:opacity-50 disabled:cursor-not-allowed"
        >
          🏠 回到根目录
        </button>
      </div>

      {/* 隐藏的文件输入框 */}
      <input
        ref={singleFileInputRef}
        type="file"
        onChange={handleSingleFileChange}
        disabled={disabled}
        className="hidden"
      />
      <input
        ref={multipleFileInputRef}
        type="file"
        multiple
        onChange={handleMultipleFileChange}
        disabled={disabled}
        className="hidden"
      />
    </div>
  );
};

export default Toolbar; 